import { Space, Table, Tag, Button, Input, Progress } from 'antd';
import React, { useRef, useState } from 'react';
import { DataTable, IvButton, Modal, PrismView } from '@/components'
import { useNavigate } from 'react-router-dom'
import {Texts} from './text'


function CheckChange(e, a) {
  console.log(e, a);

}
function getCheckboxProps(record) {
  return {
    disabled: record.ssdw === '上海', // 是否禁用
    name: record.name,
  }
}
const TableTest: React.FC = () => {
  const ModalRef = useRef<any>()
  const DataTableRef = useRef<any>()
  const navigate = useNavigate()
  const [tableConfilg] = useState({
    tData: [
      {
        ssdw:'上海',
        lastName:'北京',
        realName:'深圳',
        index:1

      }
    ],
    tHead: [
      { title: '名称', dataIndex: 'ssdw' },
      { title: 'xxx', dataIndex: 'realName', },
      {
        title: '插槽1', dataIndex: 'lastName', render: (_, record) => (
          <Space size="middle">
            我是插槽
          </Space>
        )
      },
      {
        title: '插槽2', dataIndex: 'firstName', render: (_, record) => (
          <div >
            <Tag color="magenta">magenta</Tag>  
                    </div>
        )
      },
      {
        title: '阿萨德dd12', dataIndex: '打1', render: (_, record) => (
          <div >
             <Progress percent={Number((Math.random()*100).toFixed(0))} status="active" />
          </div>
        )
      },
      {
        title: '阿萨德', dataIndex: '订单2', render: (_, record) => (
          <div >
            <Input defaultValue={(Math.random()*100).toFixed(0)} placeholder="Basic usage" />
          </div>
        )
      },
      {
        title: '右边侧边栏', dataIndex: '3', fixed: 'right' as 'right',
        callback(v, row) {
          const arr = [{ label: '详情', type: 'details' }]
          return arr
        }
      },
    ],

  })
  const ajax = {
    url: 'xxxx',
    method: 'post',
    data: {
      // 参数
    }
  }
  function goDetails() {
    navigate('details', { state: { a: 122 } })
  }
  function showModal(callback) {
    // 具体使用看 ant网站
    ModalRef.current.Modal.error({
      title: 'This is an error message',
      content: 'some messages...some messages...',
    })
    callback()
  }
  function showModal2(callback) {
    ModalRef.current.showModal()
    setTimeout(() => {
      callback()
    }, 2000)
  }
  function handleOk(type) {
    ModalRef.current.hide()
  }
  return (
    <div>
    <PrismView html={Texts}></PrismView>
      <IvButton type="primary" onClick={() => {
        console.log(tableConfilg.tHead);

        DataTableRef.current.exportExcel('导出功能')
      }}>
        导出
      </IvButton>
      <IvButton type="primary" onClick={showModal}>
        出现其他
      </IvButton>
      <IvButton type="primary" onClick={showModal2}>
        出现弹窗
      </IvButton>
      <Modal handleOk={handleOk} ref={ModalRef} title='我是弹窗标题' autoClose={false}>
        45454asdasd
      </Modal>
      <DataTable tableClickConfig={(e)=>{
        console.log(e.type);
        if(e.type === 'details') {
          goDetails()
        }
        
      }} ref={DataTableRef} getCheckboxProps={getCheckboxProps}  isIndex={true} inTableData={tableConfilg} CheckChange={CheckChange} selectType='checkbox' ></DataTable>

    </div>
  )
}

export default TableTest;